
<template>
  <div class="result">
    <div id="back" style="padding-bottom:25px">
      <el-page-header @back="goBack" content="预测结果">
      </el-page-header>

    </div>
    <span>
      <el-button type="primary" plain @click="NetworkVIS">网络可视化</el-button>
    </span>

    <el-table
        ref="table"
        :data="tableData"
        @selection-change="handleSelectionChange"
        height="383"
        border
        tooltip-effect="dark"
        style="width: 100%;margin-top: 2px">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="rank"
          label="Rank"
          width="160">
      </el-table-column>
      <el-table-column
          prop="diseaseId"
          label="DiseaseId"
          width="160">
      </el-table-column>

      <el-table-column
          prop="geneSymbol"
          label="GeneSymbol"
          width="170">
      </el-table-column>
      <el-table-column
          prop="score"
          label="Score"
          width="160">
      </el-table-column>
      <el-table-column
          prop="entrez_id"
          label="Entrez_id"
          width="160">
      </el-table-column>
      <el-table-column
          prop="location"
          label="Location"
          width="160">
      </el-table-column>
      <el-table-column
          prop="VIS"
          label="VIS"
          width="160">
        <template slot-scope="scope">
          <a :href="'http://bioinformatics.csu.edu.cn/DGP/vis.jsp?geneSymbol=' + scope.row.geneSymbol" target="_blank">VIS</a>
        </template>
      </el-table-column>

    </el-table>

    <div style="margin-top: 10px">
      <el-pagination
          @size-change="updatePageSize"
          @current-change="updatePageNum"
          :current-page="form.pageNum"
          :page-sizes="[10, 25, 50,100,200]"
          :page-size="form.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
  </div>

</template>
<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      form: {
        name: '',
        method: 'default',
        top:10,
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      total: 0,
      selection: []
    };
  },
  mounted() {
    this.form.name = this.$route.query.name;
    this.form.top = this.$route.query.top;
    this.total=parseInt(this.form.top);
    this.onSubmit();
  },
  methods: {
    goBack() {
      this.$router.push('/');
    },
    updatePageSize(pageSize) {
      this.form.pageSize = pageSize;
      this.onSubmit();
    },
    updatePageNum(pageNum) {
      this.form.pageNum = pageNum;
      this.onSubmit();
    },
    onSubmit() {
      request.get("/result", {
        params: this.form
      }).then(res => {
        // console.log(res)
        if (res.code === '0') {
          this.tableData = res.data.predictions;
          this.total = res.data.top;
        }
      }).catch(error => {
        console.error('请求出错：', error);
      });
    },


    handleSelectionChange(val) {
      this.selection = val;
    },
    NetworkVIS() {
      let i;
      const selectedRows = this.selection;
      const num = selectedRows.length;

      if(num > 0){
        const geneList = [];
        for (i = 0; i < selectedRows.length; i++) {
          geneList.push(selectedRows[i].geneSymbol);
        }
        const geneString = geneList.join(','); //把连接好的数组转成字符串
        window.open("http://bioinformatics.csu.edu.cn/DGP/vis2.jsp?geneSymbol=" + geneString);
      }else{
        const allGeneList = [];
        for (i = 0; i < this.tableData.length; i++) {
          allGeneList.push(this.tableData[i].geneSymbol);
        }
        const allGeneString = allGeneList.join(',');
        window.open("http://bioinformatics.csu.edu.cn/DGP/vis.jsp?geneSymbol=" + allGeneString);
      }
    }

  }
}
</script>
